<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
        </div>
        <nly-content>
            <div class="task-detail">
                    <div class="call-button-list">
                        <div class="call-button">
                            <a-button style="top:-2px;margin-left:10px;" type="primary" @click="addItem">
                                    新建
                            </a-button>
                            <a-button style="top:-2px;margin-left:10px;" type="primary" @click="editItemFun">
                                    修改
                            </a-button>
                            <a-button style="top:-2px;margin-left:10px;" type="primary" @click="batchDelete">
                                    删除
                            </a-button>
                            <!-- <a-button style="top:-2px;margin-left:10px;" type="primary" v-if="!callMinutes || callMinutes.deposit < 1000" @click="openDepositModal">
                                    保证金
                            </a-button> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- 列表 -->
            <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 500}" :pagination="pagination" :row-selection="rowSelection"  @change="onTableChange" :loading="false">
                <div slot="status" slot-scope="text, record" >
                   <sapn v-if="text == 1" style="color: green" @click="batchDisable(record)">启用</sapn>
                   <sapn v-if="text == 2" style="color: red" @click='batchEnable(record)'>停用</sapn>
                </div>
            </a-table>
             <!-- 新增坐席 弹窗  -->
            <drag-modal :visible="editModal" centered :title="editItem.id ? '编辑坐席' : '新增坐席'" width="550px" @cancel="hideModal">
                <div class="renwu-from" >
                    <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>员工姓名</div>
                    <div class="renwu-secend">
                        <input-group-search modalTitle="选择员工" rightStyle="width: 320px;margin-top:-45px;" treeType="officeUser" :valueTitle.sync="editItem.bindingUserName" v-model="editItem.bindingUserId" />
                    </div>
                </div>
                <div class="renwu-from">
                    <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>坐席账号</div>
                    <div class="renwu-secend"><a-input v-model="editItem.loginAccount"/></div>
                </div>
                <!-- <div class="renwu-from">
                    <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>登录密码</div>
                    <div class="renwu-secend"><a-input v-model="editItem.loginPwd"/></div>
                </div>
                <div class="renwu-from" >
                    <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>公司名称</div>
                    <div class="renwu-secend"><a-input v-model="editItem.tenantName"/></div>
                </div> -->
                <div class="renwu-from" >
                    <div class="renwu-frisht" ><span style="color:red;padding-right: 3px;">*</span>电话号码</div>
                    <div class="renwu-secend"><a-input v-model="editItem.phone"/></div>
                </div>
                
                <template slot="footer">
                    <a-button :style="{ marginLeft: '8px' }" @click="hideModal">关闭</a-button>
                    <a-button type="primary" @click="handleSubmit">确定</a-button>
                </template>
            </drag-modal>
            <!-- 缴纳保证金 -->
            <add-deposit-modal ref="addDepositModal" @callBack="reLoadData"></add-deposit-modal>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import {  pageCrmCallAgentCustomerVo, saveAgentByCompany , deleteByIdsByCompany ,batchEnableByCompany, batchDisableByCompany} from "@/api/crm/call/agentManage";
import { getByCompany} from "@/api/crm/call/callMinutes";
import AddDepositModal from "@/views/call/modal/AddDepositModal";

export default {
    components: {
      AddDepositModal
    },
    data () {
        const columns = [
            {
                align: "center",
                title: "序号",
                dataIndex: "index",
                width: 25,
                customRender:(text,record,index)=>{
                    return index+1;
                }
            },
             {
                align: "left",
                title: "姓名",
                dataIndex: "bindingUserName",
                width: 100,
            },
             {
                align: "left",
                title: "部门",
                dataIndex: "officeName",
                width: 80,
               
            },
            {
                align: "center",
                title: "坐席账号",
                dataIndex: "loginAccount",
                width: 80,
            },
             {
                align: "center",
                title: "绑定电话",
                dataIndex: "phone",
                width: 80,
            },
            // {
            //     align: "left",
            //     title: "外显号码",
            //     dataIndex: "showNumber",
            //     width: 100,
            // },
            // {
            //     align: "center",
            //     title: "外呼账号",
            //     dataIndex: "loginAccount",
            //     width: 80,
            // },
            // {
            //     align: "center",
            //     title: "密码",
            //     dataIndex: "loginPwd",
            //     width: 100,
            // },
            {
                align: "center",
                title: "状态(可设置)",
                dataIndex: "status",
                width: 100,
                scopedSlots: { 
                    customRender: 'status' 
                },
                // customRender: (text, row, index) => {
                //     //状态 0：未启用 1.启用 2.暂停
                //     let resultTex = null;
                //     switch(text){
                //         case 0:resultTex = <sapn>未启用</sapn>;break;
                //         case 1:resultTex = <sapn style="color: green" click=''>启用</sapn>;break;
                //         case 2:resultTex = <sapn style="color: red">暂停</sapn>;break;
                //     }
                //     return resultTex;
                // },
            },
        ];
        return {
            callMinutes: null,     //租户的剩余分钟数情况
            agentStatistics: {},
            editModal: false,
            postData: {
                status:null,
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            selectedKeys: [], //工序table选中key
            selectedData: [],
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
            editItem: {

            }, //新增/编辑对象
        };
    },
    created(){
        this.reLoadData();
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        rowSelection() {
            let { userInfo } = this;
            return {
                columnWidth:30,
                selectedRowKeys:this.selectedKeys,
                onChange: this.userSelection,
                // getCheckboxProps: record => ({
                //     props: {
                //         disabled: record.status > 1, 
                //     },
                // }),
            };
        },
    },
    watch: {
       
    },
    methods: {
        //跳转到购买坐席页面
        goByAgent () {
            this.$router.push("/crm/call/buyAgent")
        },
        reLoadData(){
            this.getByCompany();
            this.pageList();
        },
         //获取当前账单
        getByCompany () {
            getByCompany().then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    if(data){
                        this.callMinutes = data;
                    }
                }
            }).catch(error => { });
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
        userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        //获取列表
        pageList () {
            const { postData } = this;
            pageCrmCallAgentCustomerVo(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
    
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
        openModal(editItem){
            this.editModal = true;
            this.editItem = editItem;
        },
        hideModal () {
            this.editModal = false;
        },
        //新增
        addItem () {
            let {callMinutes} = this;
            if(!callMinutes || callMinutes.deposit < 1000){
                this.$refs.addDepositModal.onModalOpen({});
                return;
            }
            let editItem = {};
            this.openModal(editItem);
        },
        //编辑
        editItemFun () {
             if (this.selectedKeys.length != 1) {
                this.$message.warning('请选择一条记录');
                return;
            }
            let item = this.selectedData[0];
            let editItem = {...item};
            this.openModal(editItem);

        },
        //批量删除
        batchDelete () {
             let {companyId} = this.postData;
            let _this = this;
            if (this.selectedKeys.length < 1) {
                this.$message.warning('请选择记录');
                return;
            }
             this.$confirm({
                title: '确认',
                content: <span>您确定要{<span style='color:red;'>删除</span>}这些记录吗？</span>,
                onOk () {
                     deleteByIdsByCompany(_this.selectedKeys).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("删除成功");
                            _this.selectedKeys = [];
                            _this.selectedData = [];
                            //刷新 
                            _this.reLoadData();
                        }
                    });
                },
                onCancel () { },
            });
        },
        //批量启用
        batchEnable (record) {
            let _this = this;
            // if (this.selectedKeys.length < 1) {
            //     this.$message.warning('请选择记录');
            //     return;
            // }
             this.$confirm({
                title: '确认',
                content: <span>您确定要{<span style='color:red;'>启用</span>}这些记录吗？</span>,
                onOk () {
                     batchEnableByCompany([record.id]).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("启用成功");
                            // _this.selectedKeys = [];
                            // _this.selectedData = [];
                            //刷新 
                            _this.reLoadData();
                        }
                    });
                },
                onCancel () { },
            });
        },
        //批量停用
        batchDisable (record) {
            let _this = this;
            // if (this.selectedKeys.length < 1) {
            //     this.$message.warning('请选择记录');
            //     return;
            // }
             this.$confirm({
                title: '确认',
                content: <span>您确定要{<span style='color:red;'>停用</span>}这些记录吗？</span>,
                onOk () {
                     batchDisableByCompany([record.id]).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("停用成功");
                            // _this.selectedKeys = [];
                            // _this.selectedData = [];
                            //刷新 
                            _this.reLoadData();
                        }
                    });
                },
                onCancel () { },
            });
        },
        //保存
        handleSubmit (e) {
            e.preventDefault();
            const {editItem} = this;
            delete editItem.createDate;
            delete editItem.createUserName;
            delete editItem.createUserId;
            delete editItem.bindingDate;
            editItem.companyId = this.postData.companyId;
            if(!editItem.loginAccount){
                this.$message.error("请输入登录账户");
                return;
            }
            // if(!editItem.loginPwd){
            //     this.$message.error("请输入登录密码");
            //     return;
            // }
            //  if(!editItem.tenantName){
            //     this.$message.error("请输入公司名称");
            //     return;
            // }
            if(!editItem.phone){
                this.$message.error("请输入电话号码");
                return;
            }
            
             if(!editItem.bindingUserName){
                this.$message.error("请选择员工");
                return;
            }
            
            console.log("开始保存:", editItem);
            saveAgentByCompany(editItem).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功")
                    //刷新 列表
                    this.selectedKeys = [];
                    this.selectedData = [];
                    this.hideModal();
                    this.reLoadData();
                }
            });
        },
    }
};
</script>
<style scoped >

 
   
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
        margin-bottom: 0px !important;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }

    
</style>
<style lang="less" scoped>
/deep/.ant-input-sm{
    height: 32px !important;
}

/* 按钮组样式 */
.call-button-list {
    height: 80px;
    .call-button {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
}

   .renwu-from {
         display: flex;
         min-height: 35px;
         line-height: 35px;
         margin-top: 10px;
         .renwu-frisht {
            width: 120px;
         }
         .renwu-secend {
            width: 350px;
            .play-btns {
                margin-left: 10px;
            }
            .ant-input,.ant-select-selection{
            width: 100%;
            outline: none;
            border: 1px solid #C6C1C1 !important;
            width: 100%;
            }
         }
     }
  //任务详情
    .task-detail{
        border: 1px solid #e8e8e8;
        background: #fff;
        border-radius: 2px;
        position: relative;
        box-sizing: border-box;
        color: rgba(0,0,0,.65);
        line-height: 1.5;
        font-size: 14px;
        margin-top:-5px;
        margin: 0px 5px 10px 5px;
        .task-detail-header{
            padding: 14.5px 24px;
            background: #f2f3f5;
            border-bottom: 1px solid #e8e8e8;
            color: rgba(0,0,0,.85);
            min-height: 40px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 2px 2px 0 0;
        }
        .task-detail-content{
            padding: 8px 24px 3px 24px;
            .task-detail-item{
                margin-bottom: 5px;
                .task-detail-title{
                    display: inline-block;
                    width: 60px;
                    margin-right: 8px;
                    color: #7b7979;
                }
            }
        }
    }
</style>